<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>报表组件</title>
		<script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/echarts/5.3.0-rc.1/echarts.min.js"></script>
	</head>
	<body>
		<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
		<div id="main" style="width: 600px;height:400px;"></div>

		<script type="text/javascript">
			// 基于准备好的dom，初始化echarts实例
			var myChart = echarts.init(document.getElementById('main'));

			//数据
			option = {
				title: {
					text: '汽车销量',
					subtext: '电动车',
					left: 'center'
				},
				tooltip: {
					trigger: 'item'
				},
				legend: {
					orient: 'vertical',
					left: 'left'
				},
				series: [{
					name: '月销量',
					type: 'pie',
					radius: '50%',
					data: [{
							value: 1048,
							name: '小鹏P7'
						},
						{
							value: 735,
							name: 'Model3'
						},
						{
							value: 580,
							name: '蔚来es6'
						},
						{
							value: 484,
							name: '理想one'
						},
						{
							value: 10,
							name: 'Taycan'
						}
					],
					emphasis: {
						itemStyle: {
							shadowBlur: 10,
							shadowOffsetX: 0,
							shadowColor: 'rgba(0, 0, 0, 0.5)'
						}
					}
				}]
			};

			// 使用刚指定的配置项和数据显示图表。
			myChart.setOption(option);
		</script>

	</body>
</html>
